<template>
    <div>
        <!-- 轮播图组件 -->
        <swiper :lunboList = 'lunboList' :isfull="true"></swiper>

        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/home/newslist">
                    <img src="../../images/1.png" alt="">
                    <div class="mui-media-body">新闻资讯</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/home/photolist">
                    <img src="../../images/2.png" alt="">
                    <div class="mui-media-body">图片分享</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/home/goodslist">
                    <img src="../../images/3.png" alt="">
                    <div class="mui-media-body">商品购买</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/4.png" alt="">
                    <div class="mui-media-body">location</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/5.png" alt="">
                    <div class="mui-media-body">Search</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/6.png" alt="">
                    <div class="mui-media-body">Phone</div></a></li>
        </ul> 
    </div>
</template>

<script>
import { Toast } from "mint-ui";
import swiper from '../subcomponents/swiper.vue';
export default {
  data() {
    return {
      lunboList: [] //保存轮播图数据
    };
  },
  created() {
    //生命周期
    this.getLunbotu();
  },
  methods: {
    getLunbotu() {
      //获取轮播图
      this.$http.get("api/getlunbo").then(result => {
        console.log(result.body);
        if (result.body.status === 0) {
          //成功
          this.lunboList = result.body.message;
        } else {
          //失败
          Toast("加载轮播失败");
        }
      });
    }
  },
  components:{
        swiper
  }
};
</script>

<style lang="sass" scoped>

body{
        background-color:#fff;
}
.mui-grid-view.mui-grid-9{
        background-color:#fff;
        border:none;
        img{
                width:60px;
        }
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border:none;
}
</style>
